<template>
	<div>
		<div ref="target" class="w-full h-full"></div>
	</div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
	data: {
		type: Object,
		required: true
	},
	addData:{
		type: Object,
		required: true
	}
})

const exampleProject = props.data.map(trend => trend[0])
const allDate = props.data[0].slice(1, 7).map(item => item[0])
const modifiedDates = allDate.map(date => {
	return date.replace("-", ".").replace("-01", "");
});

// .map(num => parseFloat(num.toFixed(1)))
modifiedDates.reverse().push("2023.04(预测)", "2023.05(预测)")

const formatData = (data,index1) => {
	const arr = data[index1].slice(1, 7).map(item => item[1].toFixed(1)).reverse()
	arr.push(JSON.parse(data[index1][11][0].future_data.replace(/'/g, '"'))[1], JSON.parse(data[index1][11][0].future_data.replace(/'/g, '"'))[2])
	console.log(arr);
	return arr
}
const allActive0 = formatData( props.data,0)
const allActive1 = formatData( props.data,1)
const allActive2 = formatData( props.data,2)
const allActive3 = formatData( props.data,3)
const allActive4 = formatData( props.data,4)



console.log(321, allActive0)
// 获取 dom 实例
const target = ref(null)

// echarts 实例变量
let mChart = null
// 在 mounted 生命周期之后，实例化 echarts
onMounted(() => {
	mChart = echarts.init(target.value)
	// 渲染 echarts
	renderChart()
})

// 渲染图表
const renderChart = () => {
	const options = {
		title:
		{
			text: '活跃度趋势及预测',
			textStyle: {
				color: '#ccc',
				fontSize: 20
			}
		},
		tooltip: {
			trigger: 'axis'
		},
		legend: {
			// data: ['project1', 'project2', 'project3', 'project4', 'project5'],
			data: props.data.map(trend => trend[0].replace(/"/g, "'")),
			// data:props.data.map(trend => trend[0]),
			textStyle: {
				color: '#ccc',
			}
		},
		// X 轴展示数据
		xAxis: {
			// 数据展示
			type: 'category',
			boundaryGap: false,
			// data: ['2023.2', '2023.3', '2023.4', '2023.5', '2023.6',
			// 	'2023.7', '2023.8', '2023.9(预测)', '2023.10(预测)'],
			data: modifiedDates,
			// 显示轴
			show: true,
			// // 不展示轴线
			// axisLine: {
			// 	show: false
			// },
			// 文字色值
			axisLabel: {
				color: 'orange'
			}

		},
		// Y 轴展示选项
		yAxis: {
			type: 'value',
			// 显示轴
			show: true,

			// // 不展示轴线
			// axisLine: {
			// 	show: false,
			// },

			// 不展示刻度
			axisTick: {
				show: false // 取消 Y 轴刻度
			},
			// 文字色值
			axisLabel: {
				color: 'orange'
			}
		},
		// echarts 网格绘制的位置，对应 上、右、下、左
		grid: {
			top: 35,
			right: 38,
			bottom: 0,
			left: 0,
			// 计算边距时，包含标签
			containLabel: true
		},
		// 柱形图核心配置
		series: [
			{
				name: exampleProject[0],
				smooth: true,
				type: 'line',
				//   stack: 'Total',
				data: allActive0,
				// 轴上的字体
				label: {
					show: true,
					// 设置标签位置为侧上侧
					position: 'right',
					textStyle: {
						// 设置标签文本颜色
						color: 'white'
					}
				}
			},
			{
				name: exampleProject[1],
				smooth: true,
				type: 'line',
				data: allActive1,
				// 轴上的字体
				label: {
					show: true,
					// 设置标签位置为侧上侧
					position: 'right',
					textStyle: {
						// 设置标签文本颜色
						color: 'white'
					}
				}
			},
			{
				name: exampleProject[2],
				smooth: true,
				type: 'line',
				data: allActive2,
				// 轴上的字体
				label: {
					show: true,
					// 设置标签位置为侧上侧
					position: 'right',
					textStyle: {
						// 设置标签文本颜色
						color: 'white'
					}
				}
			},
			{
				name: exampleProject[3],
				smooth: true,
				type: 'line',
				data: allActive3,
				// 轴上的字体
				label: {
					show: true,
					// 设置标签位置为侧上侧
					position: 'right',
					textStyle: {
						// 设置标签文本颜色
						color: 'white'
					}
				}

			},
			{
				name: exampleProject[4],
				smooth: true,
				type: 'line',
				data: allActive4,
				// 轴上的字体
				label: {
					show: true,
					// 设置标签位置为侧上侧
					position: 'right',
					textStyle: {
						// 设置标签文本颜色
						color: 'white'
					}
				}
			}
		]
	}
	if(props.addData?.length){
		console.log('数据',props.addData[0].slice(1,7).map(item=>item[1]));
		options.legend.data[5]=props.addData[0][0]
		options.series[5]={
				name: props.addData[0][0],
				smooth: true,
				type: 'line',
				//   stack: 'Total',
				data: props.addData[0].slice(1,7).map(item=>item[1]).reverse(),
				// 轴上的字体
				label: {
					show: true,
					// 设置标签位置为侧上侧
					position: 'right',
					textStyle: {
						// 设置标签文本颜色
						color: 'white'
					}
				}
		}
		options.series[5].data.push(JSON.parse(props.addData[0][11][0].future_data.replace(/'/g, '"'))[1], JSON.parse(props.addData[0][11][0].future_data.replace(/'/g, '"'))[2])
	}
	console.log('options',options);
	mChart.setOption(options)
}

// 监听数据的变化，重新渲染图表
watch(
	() => props.addData,
	() => {
		if(props.addData?.length){
			console.log(props.addData);
			renderChart()
		}
	},
	{ deep: true }

)
</script>

<style lang="scss" scoped></style>
